{extends 'base/site2.html'}
{block name="page_header"}{include file="common/header.html" inline}{/block}
{block name="page_nav"}{include file="common/slide-nav.html" inline}{/block}
{block name="page_styles"}
<link rel="stylesheet" type="text/css" href="/css/mediation/incoming/index.css" />
{/block}

{block name="page_section"}

<div class="sessionPage">
    <div class="page-header">
        <div class="left">
            <span class="line"></span>
            <strong class="tit">呼入记录</strong>
        </div>
    </div>
    <form class="small-style" method="get" action="" id="form-ele" role="validform" enctype="multipart/form-data">
        <div class="form_row">
            <input type="hidden" name="limit" value="{if $query.limit}{$query.limit}{/if}">
            <div class="form-group col-lg-3 ui-select">
                <label for="exampleInputName2"  class="col-sm-4 control-label">调解部门:</label>
                <div class="col-sm-7">
                    <select class="form-control" name="mediationOrganId">
                        <option class="u144_input_option"  {if $query.mediationOrganId=='0'}selected="selected"{/if} value="0">全部</option>
                        {foreach from=$mediationOrgan item=item key=key}
                        <option class="u144_input_option" {if $query.mediationOrganId==$key}selected="selected"{/if} value="{$key}">{$item.name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="form-group col-lg-3 ui-select">
                <label for="exampleInputName2"  class="col-sm-4 control-label">调解员:</label>
                <div class="col-sm-7">
                    <select class="form-control" id="is_contrast" name="mediatorId" role-ele="mediator">
                        <option class="u144_input_option" {if $query.mediatorId==0}selected="selected"{/if} value="0">全部</option>
                        {foreach from=$mediator item=item }
                        {if $item.id != 1}
                        <option class="u144_input_option" {if $query.mediatorId == $item.id}selected="selected"{/if} value="{$item.id}">{$item.name}</option>
                        {/if}
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="form-group col-lg-3 ui-select">
                <label for="exampleInputName2"  class="col-sm-4 control-label">资产方:</label>
                <div class="col-sm-7">
                    <select class="form-control selectpicker"  title="请选择" name="assetsId" id="assetsId">
                        {foreach from=$assets  item=info}
                        <option class="u144_input_option" {if !empty($query.assetsId) &&  $info.id== $query.assetsId}selected="selected"{/if} value="{$info.id}">{$info.name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="form-group col-lg-3 ui-select">
                <label for="exampleInputName2"  class="col-sm-4 control-label">接通状态:</label>
                <div class="col-sm-7">
                    <select class="form-control" id="is_contrast" name="talkType" role-ele="talkType">
                        <option class="u144_input_option" {if $query.talkType==0}selected="selected"{/if} value="0">全部</option>
                        <option class="u144_input_option" {if $query.talkType == 1}selected="selected"{/if} value="1">接通</option>
                        <option class="u144_input_option" {if $query.talkType == 2}selected="selected"{/if} value="2">未接通</option>
                    </select>
                </div>
            </div>

        </div>
        <div class="form_row">
            <div class="form-group col-lg-3 ui-select">
                <label for="exampleInputName2"  class="col-sm-4 control-label">关联案件号:</label>
                <div class="col-sm-7">
                    <input type="text" class="form-control noempty col-sm-4"  value="{$query.caseId}" name="caseId" id="caseId" placeholder="请输入~">
                </div>
            </div>
            <div class="form-group col-lg-3 ui-select">
                <label for="exampleInputName2"  class="col-sm-4 control-label">当事人:</label>
                <div class="col-sm-7">
                    <input type="text" class="form-control noempty col-sm-4"  value="{$query.litigantName}" name="litigantName" id="litigantName" placeholder="请输入~">
                </div>
            </div>
            <div class="form-group col-lg-3 ui-select">
                <label for="exampleInputName2"  class="col-sm-4 control-label">案件合同号:</label>
                <div class="col-sm-7">
                    <input type="text" class="form-control noempty col-sm-4"  value="{$query.contractNo}" name="contractNo" id="contractNo" placeholder="请输入~">
                </div>
            </div>
            <div class="form-group col-lg-3 ui-select">
                <label for="exampleInputName2"  class="col-sm-4 control-label">通话号码:</label>
                <div class="col-sm-7">
                    <input type="text" class="form-control noempty col-sm-4" value="{$query.callPhone}" name="callPhone" id="callPhone" placeholder="请输入~">
                </div>
            </div>

        </div>
        <div class="form_row">
            <div class="form-group col-lg-3 ui-select">
                <label for="exampleInputName2"  class="col-sm-4 control-label">导入批次ID:</label>
                <div class="col-sm-7">
                    <input type="text" class="form-control noempty col-sm-4"  value="{if !empty($query.importRecordId)}{$query.importRecordId}{/if}" name="importRecordId" id="importRecordId" placeholder="请输入~">
                </div>
            </div>
            <div class="form-group col-lg-3 ui-select">
                <label class="col-sm-4 control-label">
                    呼叫时间:
                </label>
                <div class="col-sm-7">
                    <input data-ele="date" data-type="daterange" name="add_begin_end" class="form-control" placeholder="请选择" value="{if !empty($smarty.get.add_begin_end)}{$smarty.get.add_begin_end}{/if}" autocomplete="off"/>
                </div>
            </div>
            <div class="form-group col-lg-3 ui-select">
                <label for="exampleInputName2"  class="col-sm-4 control-label">呼叫时长:</label>
                <div class="col-sm-7">
                    <input type="number" class="form-control"  value="{if !empty($query.starttalkTime)}{$query.starttalkTime}{/if}" name="starttalkTime" placeholder="大于该值">
                    -
                    <input type="number" class="form-control"  value="{if !empty($query.endtalkTime)}{$query.endtalkTime}{/if}" name="endtalkTime" placeholder="小于该值" >
                </div>
            </div>
            <div class="form-group col-lg-3 ui-select">
                <div class="col-lg-5">
                    <button class="btn btn-primary col-lg-8 shousuoBtn"><span class="nav-icon glyphicon glyphicon-search" aria-hidden="true" style="margin-right: 2px"></span>查询</button>
                </div>
                <div class="col-lg-5">
                    <a type="button" href="/callin/index" class="btn btn-default col-lg-8" ><span class="nav-icon glyphicon glyphicon-refresh" aria-hidden="true" style="margin-right: 2px"></span>重置</a>
                </div>
                <div class="col-lg-5">
                    <button  class="btn btn-info col-lg-8 data_upload"><span class="nav-icon glyphicon glyphicon-download-alt" aria-hidden="true" style="margin-right: 2px"></span>导出</button>
                </div>
            </div>
        </div>
    </form >
    <div style="width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow-x: scroll;">
        <table class="table table-striped table-bordered table-hover text-nowrap">
            <thead>
            <tr>
                <th>序号</th>
                <th>调解部门</th>
                <th>资产方</th>
                <th>案件号</th>
                <th>呼入类型</th>
                <th>通话状态</th>
                <th>当事人</th>
                <th>合同号</th>
                <th>手机号</th>
                <th>调解员</th>
                <th>呼入时间</th>
                <th>结束时间</th>
                <th>通话时长</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {foreach from=$list item=item key=key}
            <tr>
                <td>{$item.id}</td>
                <td>{$mediationOrgan[$item['mediationOrganId']]['name']}</td>
                <td>{$assets[$item.assetsId]['name']}</td>
                <td>{if $item.caseId>0}{$item.caseId}{/if}</td>
                <td>{if $item.callType==2}案件咨询{elseif $item.callType==3}投诉建议{/if}</td>
                <td>{if $item.talkType==1}接通{elseif $item.talkType==2}未接通{/if}</td>
                <td class="nowrap">{$item.callName}</td>
                <td class="nowrap">{$item.contractNo}</td>
                <td>
                    <a href="#" data-toggle="tooltip" data-placement="bottom"
                       title="{$item.callPhone}">
                        {substr($item.callPhone,0,3)}****{substr($item.callPhone,7,4)}

                    </a>
                </td>
                <td class="nowrap">{$item.mediatorName}</td>
                <td class="nowrap">{$item['callTime']|date_format:"%Y-%m-%d %H:%M:%S"}</td>
                <td class="nowrap">
                    {if $item['callEndTime']}
                    {$item['callEndTime']|date_format:"%Y-%m-%d %H:%M:%S"}</td>
                {/if}
                </td>

                <td>{$item.talkTime}</td>

                <td>
                    {if $item.fileName}
                    <div style="width: 100%;text-align: center">
                        <span class="nav-icon glyphicon glyphicon-headphones playrecord" data-toggle="modal" data-target="#playaudio" data-url="{$soundfileurl}{$item.fileName}" aria-hidden="true" style="margin-left: 20%"></span>
                        <span onclick="download('{$soundfileurl}{$item.fileName}','{$item.mediatorName}{$item.callTime|date_format:'%Y%m%d%H%M'}.mp3')" class="nav-icon glyphicon glyphicon-save" aria-hidden="true" style=""></span>
                    </div>
                    <div class="callaudio" style="display: none">
                        <audio controls="controls" src="{$soundfileurl}{$item.fileName}" class="ui-audio" style="display:none;" preload="auto"></audio>
                        <!--                <audio controls="controls" src="{$soundfileurl}{$item.fileName}" class="ui-audio" style="display:none;" preload="auto"></audio>-->
                    </div>
                    {/if}
                </td>

            </tr>
            {/foreach}
            </tbody>
        </table>
    </div>
    <div class="clearfix pad-no text-nowrap" style="margin-top: 20px;">
        {include file="base/pagenav.html"  action="/callin/index" pagenum=$curPageNum inline}
        <select class="form-control" id="paglimit" style="float:right;margin:0 10px;width: auto;margin-top: -5px;">
            <option value="limit=10" {if $query.limit==10}selected="selected"{/if}>10条/页</option>
            <option value="limit=20" {if $query.limit==20}selected="selected"{/if}>20条/页</option>
            <option value="limit=50" {if $query.limit==50}selected="selected"{/if}>50条/页</option>
            <option value="limit=100" {if $query.limit==100}selected="selected"{/if}>100条/页</option>
        </select>
        <span style="float:right;">共 {$totalnum} 条</span>
    </div>
</div>


<div role-side="left" class="ui-slide-box"></div>

{/block}

{block name="page_scripts"}
<script type="text/javascript">
    function download(filePath,name) {
        fetch(filePath).then(res => res.blob()).then(blob => {
            const a = document.createElement('a');
            document.body.appendChild(a)
            a.style.display = 'none'
            const url = window.URL.createObjectURL(blob);
            a.href = url;
            a.download = name;
            a.click();
            document.body.removeChild(a)
            window.URL.revokeObjectURL(url);
        });
    }
    $(".playrecord").on("click",function(){
        let audiodiv = $(this).parents('td').find('div').filter('.callaudio');
        audiodiv.css('display','block');
        let audio = $(this).parents('td').find('audio');
        audio[0].play();
        audiodiv.find('div').filter('.audiojs').addClass('playing')

    });

    $(".data_upload").on("click",function(){
        var is_down =confirm('请确认是否下载？\n'+ '下载时间可能比较慢,点击后请耐心等待!') ;
        if(is_down){
            $("#form-ele").attr('action','/callin/export');
            $("#form-ele").submit();

        }
    });

    $(".shousuoBtn").on("click",function(){
        $("#form-ele").attr('action','');
        $("#form-ele").submit();

    });
    function GetQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
    $('body').on('change','#paglimit', function(){
        var mediationOrganId = GetQueryString('mediationOrganId');
        var paglimit = GetQueryString('limit');
        var val =  $(this).val();
        if(!mediationOrganId){
            if(!paglimit){
                window.location = window.location.href+'?'+val;
            } else{
                window.location = window.location.href.replace('limit='+paglimit,val);
            }
        }else{
            if(!paglimit){
                window.location = window.location.href+'&'+val;
            } else{
                window.location = window.location.href.replace('limit='+paglimit,val);
            }
        }
    })

</script>
{/block}
